<template>
  <div class="caseContent-container">
    <div class="caseContent-info">
      <div class="caseContent-info-left">
        <el-form
          class="case-baseinfo-form"
          ref="baseinfoForm"
          :model="optionsData"
          :rules="baseRules"
          :disabled="medicalType == 3"
        >
          <div class="case-baseinfo-container">
            <el-form-item ref="nameFormItem" prop="real_name">
              <el-input
                class="name-input"
                ref="nameInput"
                placeholder="姓名"
                v-model="optionsData.real_name"
                @focus="nameFocus"
                :disabled="
                  medicalType == 2 || optionsData.ID > 0 ? true : false
                "
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="optionsData.gender"
                placeholder="性别"
                style="width: 75px"
              >
                <el-option
                  v-for="item in sexTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="ageView">
                <el-input
                  v-model="optionsData.age[0]"
                  oninput="value=value.replace(/[^\d]/g,'')"
                ></el-input>
                <div class="age-unit">岁</div>
                <el-input
                  v-model="optionsData.age[1]"
                  placeholder="1-11"
                  oninput="value=value.replace(/[^\d]/g,'')"
                ></el-input>
                <div class="age-unit">月</div>
                <el-input
                  v-model="optionsData.age[2]"
                  placeholder="1-31"
                  oninput="value=value.replace(/[^\d]/g,'')"
                ></el-input>
                <div class="age-unit">日</div>
              </div>
            </el-form-item>
            <el-form-item prop="mobile">
              <el-input
                class="mobile-input"
                v-model="optionsData.mobile"
                placeholder="手机号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="optionsData.medical_repeat">
                <el-radio :label="1">初诊</el-radio>
                <el-radio :label="2">复诊</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="caseContent-info-more" v-if="isShowMore">
            <el-form-item class="idcard-form-item" prop="id_card">
              <el-input
                class="idcard-input"
                placeholder="身份证号码"
                v-model="optionsData.id_card"
              >
                <template slot="suffix">
                  <el-tooltip
                    content="身份证号"
                    placement="bottom"
                    effect="light"
                  >
                    <i class="el-icon-info"> </i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="address">
              <el-input
                class="address-input"
                placeholder="详细地址"
                v-model="optionsData.address"
              >
                <template slot="suffix">
                  <el-tooltip
                    content="详细地址"
                    placement="bottom"
                    effect="light"
                  >
                    <i class="el-icon-info"> </i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="tel">
              <el-input
                class="idcard-input"
                placeholder="紧急联系方式"
                v-model="optionsData.tel"
              >
                <template slot="suffix">
                  <el-tooltip
                    content="紧急联系方式"
                    placement="bottom"
                    effect="light"
                  >
                    <i class="el-icon-info"> </i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div class="caseContent-info-right">
        <div class="look-more" @click="showMoreInfo">
          <p v-if="isShowMore">
            <span>收起</span><i class="el-icon-arrow-up"></i>
          </p>
          <p v-else><span>查看更多</span><i class="el-icon-arrow-down"></i></p>
        </div>
      </div>
    </div>
    <div class="caseContent-main">
      <div class="caseContent-title">
        <div class="title-left"><span>病历</span></div>
        <!-- <div class="btn-right">
          <el-button>上传图片</el-button>
          <el-button>病例模板</el-button>
        </div> -->
      </div>
      <div class="caseContent-content">
        <ul class="content-item-ul">
          <li
            class="content-item-container"
            v-for="(item, index) in caseData"
            :key="index"
          >
            <div class="title-item">
              <i
                class="start-icon"
                v-if="item.name == 'medical_describe' || item.name == 'result'"
                >*</i
              >
              <span>{{ item.title }}</span>
            </div>
            <div
              class="content-item tigejiancha-item"
              v-if="item.name == 'tigejiancha'"
            >
              <div class="tigejiancha-item-top">
                <p class="item">
                  <span class="item-name">体温：</span
                  ><el-input v-model="item.value.temperature"></el-input
                  ><span>℃</span>
                </p>
                <p class="item">
                  <span class="item-name">体重：</span
                  ><el-input v-model="item.value.weight"></el-input
                  ><span>KG</span>
                </p>
                <p class="item">
                  <span class="item-name">心率：</span
                  ><el-input v-model="item.value.heart_rate"></el-input
                  ><span>bpm</span>
                </p>
                <p class="item">
                  <span class="item-name">血压：</span
                  ><el-input
                    placeholder="收缩压"
                    v-model="item.value.blood_pressure_1"
                  ></el-input
                  ><span> - </span
                  ><el-input
                    placeholder="舒张压"
                    v-model="item.value.blood_pressure_2"
                  ></el-input
                  ><span>mmHg</span>
                </p>
              </div>
              <div class="tigejiancha-item-other">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="其他检查"
                  v-model="item.value.medical_others"
                ></el-input>
              </div>
            </div>
            <div class="content-item" v-else-if="item.name == 'result'">
              <el-input
                v-model="item.value"
                :placeholder="'请输入' + item.title"
                :key="index"
              ></el-input>
            </div>
            <div class="content-item" v-else>
              <el-input
                v-model="item.value"
                v-if="item.name !== 'medical_describe'"
                :placeholder="'请输入' + item.title"
                :key="index"
              ></el-input>
              <el-input
                v-model="item.value"
                class="medicalDescribeInput"
                type="textarea"
                autosize
                v-else
                :placeholder="'请输入' + item.title"
                :key="index"
              ></el-input>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    optionsData: {
      type: Object,
      default: () => {},
    },
    medicalType: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    medicalType: {
      handler(newval, oldval) {
        if (newval == 1) {
          this.nameInputFocus();
        }
      },
      immediate: true,
    },
  },
  data() {
    var realNamePass = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入患者姓名"));
      } else {
        const REG = /^\s+$/g;
        if (REG.test(value)) {
          callback(new Error("姓名不能为纯空格"));
        } else {
          callback();
        }
      }
    };
    var agePass = (rule, value, callback) => {
      let bol = value.some((p) => Number(p) > 0);
      if (bol) {
        callback();
      } else {
        callback(new Error("请填写年龄"));
      }
    };
    var mobilePass = (rule, value, callback) => {
      if (value !== "") {
        const REG = /^1[3456789]\d{9}$/;
        if (!REG.test(value)) {
          callback(new Error("电话号码格式不正确"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    var idCardPass = (rule, value, callback) => {
      if (value !== "") {
        const REG = /^\s+$/g;
        if (REG.test(value)) {
          callback(new Error("身份证号不能为纯空格"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    var addressPass = (rule, value, callback) => {
      if (value !== "") {
        const REG = /^\s+$/g;
        if (REG.test(value)) {
          callback(new Error("地址不能为纯空格"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    var telPass = (rule, value, callback) => {
      if (value !== "") {
        const REG = /^1[3456789]\d{9}$/;
        if (!REG.test(value)) {
          callback(new Error("电话号码格式不正确"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      aaa: "",
      isShowMore: false,
      sexTypeList: [
        {
          value: "0",
          label: "男",
        },
        {
          value: "1",
          label: "女",
        },
      ],
      caseData: [],
      baseRules: {
        real_name: [
          {
            validator: realNamePass,
            trigger: "blur",
          },
        ],
        age: [
          {
            type: "array",
            required: true,
            validator: agePass,
            trigger: "blur",
          },
        ],
        mobile: [
          {
            validator: mobilePass,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        id_card: [
          {
            validator: idCardPass,
            trigger: "blur",
          },
        ],
        address: [
          {
            validator: addressPass,
            trigger: "blur",
          },
        ],
        tel: [
          {
            validator: telPass,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.caseData = this.$store.getters.userHabit.checkedField;
    console.log(this.caseData, this.optionsData);
  },
  methods: {
    reload() {
      this.caseData = this.$store.getters.userHabit.checkedField;
      console.log(this.caseData);
      if (this.caseData) {
        this.caseData.forEach((itm, idx) => {
          if (itm.name !== "tigejiancha") {
            itm.value = this.optionsData[itm.name];
          } else {
            itm.value = {
              temperature: this.optionsData.temperature,
              weight: this.optionsData.weight,
              heart_rate: this.optionsData.heart_rate,
              blood_pressure_1: this.optionsData.blood_pressure_1,
              blood_pressure_2: this.optionsData.blood_pressure_2,
              medical_others: this.optionsData.medical_others,
            };
          }
        });
      }
      this.$forceUpdate();
    },
    nameInputFocus() {
      this.$nextTick(() => {
        this.$refs.nameInput.focus();
        this.$refs.nameFormItem.clearValidate(); // 获得焦点后清除校验
      });
      console.log("sfdgdgdgdgdg");
    },
    nameFocus() {
      this.$nextTick(() => {
        this.$refs.nameFormItem.clearValidate(); // 获得焦点后清除校验
      });
    },
    formDataValidator() {
      let bol = false;
      this.$refs.baseinfoForm.validate((valid) => {
        if (valid) {
          bol = true;
        } else {
          console.log("error submit!!");
          bol = false;
        }
      });
      return bol;
    },
    emitCaseData() {
      return this.caseData;
    },
    showMoreInfo() {
      this.isShowMore = !this.isShowMore;
    },
  },
};
</script>
<style lang="scss">
@import "@/assets/scss/outpatient/modules/caseContent.scss";
</style>
